<template>
	<div class="base-map">
		<div id="map" class="container"></div>
	</div>
</template>

<script>

	export default {
		name: 'BaseChart',
		props: {
			data: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {

			}
		},
		mounted() {
			var map = new maptalks.Map('map', {
				center: [110.113049, 32.498568],
				zoom: 14,
				baseLayer: new maptalks.TileLayer('base', {
					urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
					subdomains: ["a", "b", "c", "d"],
					attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
				})
			});
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.base-map {
		height: 100%;

		.container {
			height: 100%;
		}

	}
</style>